<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表盘 - 王氏美容汽车集团管理系统</title>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            --secondary-gradient: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
            --success-gradient: linear-gradient(135deg, #2c5530 0%, #3d7c47 100%);
            --warning-gradient: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
            --info-gradient: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
            --danger-gradient: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
            --royal-gold: #ffd700;
            --royal-blue: #1a1a2e;
        }

        body {
            background: var(--primary-gradient);
            min-height: 100vh;
            font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
            position: relative;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="crown" patternUnits="userSpaceOnUse" width="100" height="100"><path d="M20,80 L30,60 L40,70 L50,50 L60,70 L70,60 L80,80 Z" fill="none" stroke="rgba(255,215,0,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23crown)"/></svg>') repeat;
            opacity: 0.3;
            z-index: -1;
        }

        .navbar {
            background: rgba(0,0,0,0.2) !important;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .navbar-brand {
            color: var(--royal-gold) !important;
            font-weight: 700;
            font-size: 1.3rem;
        }

        .nav-link {
            color: rgba(255,255,255,0.9) !important;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--royal-gold) !important;
            transform: translateY(-1px);
        }

        .dashboard-card {
            background: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            overflow: hidden;
        }

        .dashboard-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .stat-card {
            background: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 20px;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--secondary-gradient);
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }

        .stat-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 2rem;
            color: white;
            background: var(--secondary-gradient);
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: #666;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .stat-change {
            font-size: 0.9rem;
            font-weight: 600;
        }

        .chart-container {
            position: relative;
            height: 350px;
            padding: 1rem;
        }

        .page-title {
            color: white;
            font-weight: 700;
            font-size: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            margin-bottom: 0.5rem;
        }

        .page-subtitle {
            color: rgba(255,255,255,0.8);
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        .content-wrapper {
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            padding: 2rem;
            margin-top: 2rem;
        }

        .quick-action-btn {
            background: rgba(255,255,255,0.1);
            border: 2px solid rgba(255,255,255,0.2);
            color: white;
            border-radius: 15px;
            padding: 1rem;
            transition: all 0.3s ease;
            text-decoration: none;
            display: block;
            text-align: center;
        }

        .quick-action-btn:hover {
            background: rgba(255,255,255,0.2);
            border-color: var(--royal-gold);
            color: var(--royal-gold);
            transform: translateY(-3px);
        }

        .alert-item {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 0.5rem;
            color: white;
        }

        .progress-custom {
            height: 8px;
            border-radius: 10px;
            background: rgba(255,255,255,0.2);
        }

        .progress-bar-custom {
            background: var(--secondary-gradient);
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="fas fa-crown me-2"></i>王氏美容汽车集团
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/dashboard">
                            <i class="fas fa-tachometer-alt me-1"></i>仪表盘
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-users me-1"></i>客户管理
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/customers"><i class="fas fa-list me-2"></i>客户列表</a></li>
                            <li><a class="dropdown-item" href="/customers/new"><i class="fas fa-plus me-2"></i>新增客户</a></li>
                            <li><a class="dropdown-item" href="/dashboard/customers"><i class="fas fa-chart-bar me-2"></i>客户统计</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-chart-line me-1"></i>统计分析
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/dashboard/orders"><i class="fas fa-shopping-cart me-2"></i>订单统计</a></li>
                            <li><a class="dropdown-item" href="/dashboard/materials"><i class="fas fa-boxes me-2"></i>材料统计</a></li>
                            <li><a class="dropdown-item" href="/dashboard/finance"><i class="fas fa-dollar-sign me-2"></i>财务统计</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/modules">
                            <i class="fas fa-th-large me-1"></i>功能模块
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-user-crown me-1"></i>管理员
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile"><i class="fas fa-user me-2"></i>个人资料</a></li>
                            <li><a class="dropdown-item" href="/settings"><i class="fas fa-cog me-2"></i>系统设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout"><i class="fas fa-sign-out-alt me-2"></i>退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <!-- 页面标题 -->
        <div class="text-center py-4">
            <h1 class="page-title">
                <i class="fas fa-tachometer-alt me-3"></i>系统仪表盘
            </h1>
            <p class="page-subtitle">实时监控系统运营数据和业务指标，掌控全局业务动态</p>
        </div>

        <div class="content-wrapper">

            <!-- 统计卡片 -->
            <div class="row mb-4">
                <!-- 客户统计 -->
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-number" th:text="${customerCount ?: 0}">0</div>
                        <div class="stat-label">总客户数</div>
                        <div class="stat-change text-success">
                            <i class="fas fa-arrow-up me-1"></i>今日新增: <span th:text="${todayNewCustomers ?: 0}">0</span>
                        </div>
                        <div class="progress-custom mt-2">
                            <div class="progress-bar-custom" style="width: 75%"></div>
                        </div>
                    </div>
                </div>

                <!-- 本月新客户 -->
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="stat-card">
                        <div class="stat-icon" style="background: var(--success-gradient);">
                            <i class="fas fa-user-plus"></i>
                        </div>
                        <div class="stat-number" th:text="${monthNewCustomers ?: 0}">0</div>
                        <div class="stat-label">本月新客户</div>
                        <div class="stat-change text-success">
                            <i class="fas fa-arrow-up me-1"></i>较上月增长 15%
                        </div>
                        <div class="progress-custom mt-2">
                            <div class="progress-bar-custom" style="width: 60%"></div>
                        </div>
                    </div>
                </div>

                <!-- 客户总余额 -->
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="stat-card">
                        <div class="stat-icon" style="background: var(--info-gradient);">
                            <i class="fas fa-wallet"></i>
                        </div>
                        <div class="stat-number">¥<span th:text="${#numbers.formatDecimal(totalBalance ?: 0, 0, 2)}">0.00</span></div>
                        <div class="stat-label">客户总余额</div>
                        <div class="stat-change text-info">
                            <i class="fas fa-coins me-1"></i>预付资金池
                        </div>
                        <div class="progress-custom mt-2">
                            <div class="progress-bar-custom" style="width: 85%"></div>
                        </div>
                    </div>
                </div>

                <!-- 客户总积分 -->
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="stat-card">
                        <div class="stat-icon" style="background: var(--warning-gradient);">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="stat-number" th:text="${#numbers.formatInteger(totalPoints ?: 0, 0)}">0</div>
                        <div class="stat-label">客户总积分</div>
                        <div class="stat-change text-warning">
                            <i class="fas fa-gift me-1"></i>忠诚度奖励
                        </div>
                        <div class="progress-custom mt-2">
                            <div class="progress-bar-custom" style="width: 70%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="row mb-4">
                <!-- 客户统计图表 -->
                <div class="col-lg-8 mb-4">
                    <div class="card dashboard-card">
                        <div class="card-header bg-white border-0 pb-0">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-chart-line me-2 text-primary"></i>客户增长趋势
                                </h5>
                                <div class="btn-group btn-group-sm" role="group">
                                    <button type="button" class="btn btn-outline-primary active" onclick="updateChart('week')">本周</button>
                                    <button type="button" class="btn btn-outline-primary" onclick="updateChart('month')">本月</button>
                                    <button type="button" class="btn btn-outline-primary" onclick="updateChart('year')">本年</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="customerTrendChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 会员等级分布 -->
                <div class="col-lg-4 mb-4">
                    <div class="card dashboard-card">
                        <div class="card-header bg-white border-0 pb-0">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-chart-pie me-2 text-warning"></i>会员等级分布
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="memberLevelChart"></canvas>
                            </div>
                            <!-- 等级说明 -->
                            <div class="mt-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="badge bg-secondary">普通会员</span>
                                    <span class="text-muted">45%</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="badge bg-info">银卡会员</span>
                                    <span class="text-muted">25%</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="badge bg-warning">金卡会员</span>
                                    <span class="text-muted">20%</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-danger">VIP会员</span>
                                    <span class="text-muted">10%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快捷操作和预警 -->
            <div class="row">
                <!-- 快捷操作 -->
                <div class="col-lg-6 mb-4">
                    <div class="card dashboard-card">
                        <div class="card-header bg-white border-0 pb-0">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-bolt me-2 text-warning"></i>快捷操作
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-6">
                                    <a href="/customers/new" class="quick-action-btn">
                                        <i class="fas fa-user-plus fa-2x mb-2"></i>
                                        <div class="fw-bold">新增客户</div>
                                        <small>添加新的客户信息</small>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="/customers" class="quick-action-btn">
                                        <i class="fas fa-users fa-2x mb-2"></i>
                                        <div class="fw-bold">客户列表</div>
                                        <small>查看所有客户</small>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="/dashboard/customers" class="quick-action-btn">
                                        <i class="fas fa-chart-bar fa-2x mb-2"></i>
                                        <div class="fw-bold">客户统计</div>
                                        <small>客户数据分析</small>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="/dashboard/finance" class="quick-action-btn">
                                        <i class="fas fa-chart-line fa-2x mb-2"></i>
                                        <div class="fw-bold">财务报表</div>
                                        <small>财务数据统计</small>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 系统预警 -->
                <div class="col-lg-6 mb-4">
                    <div class="card dashboard-card">
                        <div class="card-header bg-white border-0 pb-0">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-shield-alt me-2 text-success"></i>系统监控
                            </h5>
                        </div>
                        <div class="card-body">
                            <!-- 系统状态 -->
                            <div class="alert-item mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <i class="fas fa-server me-2"></i>
                                        <strong>系统状态</strong>
                                    </div>
                                    <span class="badge bg-success">运行正常</span>
                                </div>
                                <div class="progress-custom mt-2">
                                    <div class="progress-bar-custom" style="width: 95%"></div>
                                </div>
                                <small class="text-light">CPU: 15% | 内存: 68% | 磁盘: 45%</small>
                            </div>

                            <!-- 业务预警 -->
                            <div class="alert-item mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <i class="fas fa-exclamation-triangle me-2"></i>
                                        <strong>业务预警</strong>
                                    </div>
                                    <span class="badge bg-warning">2项关注</span>
                                </div>
                                <small class="text-light">低余额客户: 5人 | 库存不足: 3项</small>
                            </div>

                            <!-- 数据同步 -->
                            <div class="alert-item">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <i class="fas fa-sync-alt me-2"></i>
                                        <strong>数据同步</strong>
                                    </div>
                                    <span class="badge bg-info">实时同步</span>
                                </div>
                                <small class="text-light">最后更新: 刚刚</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- 图表初始化脚本 -->
    <script>
        let customerTrendChart, memberLevelChart;

        // 页面加载完成后初始化
        $(document).ready(function() {
            initCharts();
            animateCounters();
            loadRealTimeData();

            // 每30秒刷新一次数据
            setInterval(loadRealTimeData, 30000);
        });

        // 初始化图表
        function initCharts() {
            // 客户增长趋势图表
            const customerTrendCtx = document.getElementById('customerTrendChart').getContext('2d');
            customerTrendChart = new Chart(customerTrendCtx, {
                type: 'line',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [{
                        label: '新增客户',
                        data: [12, 19, 15, 25, 22, 30, 28],
                        borderColor: '#ffd700',
                        backgroundColor: 'rgba(255, 215, 0, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4,
                        pointBackgroundColor: '#ffd700',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0,0,0,0.8)',
                            titleColor: '#ffd700',
                            bodyColor: '#fff',
                            borderColor: '#ffd700',
                            borderWidth: 1
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(255,255,255,0.1)'
                            },
                            ticks: {
                                color: '#666'
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(255,255,255,0.1)'
                            },
                            ticks: {
                                color: '#666'
                            }
                        }
                    },
                    animation: {
                        duration: 2000,
                        easing: 'easeInOutQuart'
                    }
                }
            });

            // 会员等级分布图表
            const memberLevelCtx = document.getElementById('memberLevelChart').getContext('2d');
            memberLevelChart = new Chart(memberLevelCtx, {
                type: 'doughnut',
                data: {
                    labels: ['普通会员', '银卡会员', '金卡会员', 'VIP会员'],
                    datasets: [{
                        data: [45, 25, 20, 10],
                        backgroundColor: [
                            '#6c757d',
                            '#17a2b8',
                            '#ffc107',
                            '#dc3545'
                        ],
                        borderWidth: 0,
                        hoverBorderWidth: 3,
                        hoverBorderColor: '#fff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0,0,0,0.8)',
                            titleColor: '#ffd700',
                            bodyColor: '#fff',
                            borderColor: '#ffd700',
                            borderWidth: 1,
                            callbacks: {
                                label: function(context) {
                                    return context.label + ': ' + context.parsed + '%';
                                }
                            }
                        }
                    },
                    animation: {
                        animateRotate: true,
                        duration: 2000
                    }
                }
            });
        }

        // 数字动画
        function animateCounters() {
            $('.stat-number').each(function() {
                const $this = $(this);
                const text = $this.text();

                if (text.includes('¥')) {
                    const num = parseFloat(text.replace(/[¥,]/g, ''));
                    $({ counter: 0 }).animate({ counter: num }, {
                        duration: 2000,
                        step: function() {
                            $this.text('¥' + this.counter.toFixed(2));
                        }
                    });
                } else if (!isNaN(parseInt(text))) {
                    const num = parseInt(text);
                    $({ counter: 0 }).animate({ counter: num }, {
                        duration: 2000,
                        step: function() {
                            $this.text(Math.ceil(this.counter));
                        }
                    });
                }
            });
        }

        // 更新图表数据
        function updateChart(period) {
            // 更新按钮状态
            $('.btn-group .btn').removeClass('active');
            $(`button[onclick="updateChart('${period}')"]`).addClass('active');

            let labels, data;
            switch(period) {
                case 'week':
                    labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                    data = [12, 19, 15, 25, 22, 30, 28];
                    break;
                case 'month':
                    labels = ['第1周', '第2周', '第3周', '第4周'];
                    data = [85, 92, 78, 95];
                    break;
                case 'year':
                    labels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                    data = [120, 150, 180, 200, 170, 190, 220, 240, 210, 230, 250, 280];
                    break;
            }

            customerTrendChart.data.labels = labels;
            customerTrendChart.data.datasets[0].data = data;
            customerTrendChart.update('active');
        }

        // 加载实时数据
        function loadRealTimeData() {
            // 模拟实时数据更新
            const now = new Date();
            const timeStr = now.toLocaleTimeString();

            // 更新系统状态时间
            $('.alert-item:last small').text('最后更新: ' + timeStr);

            // 模拟进度条动画
            $('.progress-bar-custom').each(function() {
                const $this = $(this);
                const currentWidth = parseInt($this.css('width'));
                const newWidth = Math.max(50, Math.min(95, currentWidth + Math.random() * 10 - 5));
                $this.animate({width: newWidth + '%'}, 1000);
            });
        }

        // 快捷操作按钮悬停效果
        $('.quick-action-btn').hover(
            function() {
                $(this).find('i').addClass('fa-bounce');
            },
            function() {
                $(this).find('i').removeClass('fa-bounce');
            }
        );

        // 统计卡片点击效果
        $('.stat-card').click(function() {
            $(this).addClass('animate__animated animate__pulse');
            setTimeout(() => {
                $(this).removeClass('animate__animated animate__pulse');
            }, 1000);
        });
    </script>
</body>
</html>
